<template>
	<div class="alarmConfiguration zy-content">
		<search :columns="searchData" @getSearch="getSearch(arguments)"></search>
		<div class="list-layout mt16">
			<div class="btns clear">
				<span class="title">{{ $t('common.listInformation') }}</span>
				<Button @click="exportTemplateClick">
					{{ $t('common.batchExport') }}
				</Button>
				<Button @click="getTableColumns(columns)">{{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}</Button>
			</div>
			<div class="tableContent">
				<Table
					class="resizable-table"
					border
					@on-column-width-resize="onColumnWidthResize"
					:columns="columns"
					ellipsis
					ref="selection"
					stripe
					:data="dataArr"
					@on-selection-change="onSelectChange"
				></Table>
			</div>
			<div class="pageWrap mt16">
				<pageLeftTitle :total="total" :selected="delIds.length" />
				<Page
					:total="total"
					:page-size="pageSize"
					:page-size-opts="pageSizeOption"
					:current="pageNum"
					@on-change="changePageNum"
					@on-page-size-change="changePageSize"
					show-sizer
					show-total
				/>
			</div>
		</div>

		<Widget class="mt16" title="异常损失工时（Top10）" style="flex: 1">
			<div style="flex: 1; margin: 10px">
				<div style="width: 100%; height: 500px" id="topTen"></div>
			</div>
		</Widget>
	</div>
</template>

<script>
import search from '@/components/curd/searchList.vue';
import fileDownload from 'js-file-download';
import Widget from '@/components/dataBoard/components/widget/index.vue';
import toggleTableOperation from '@/mixins/toggleTableOperation';
import * as echarts from 'echarts';

export default {
	name: 'lostWorkingHours',
	components: { search, Widget },
	mixins: [toggleTableOperation],
	data() {
		return {
			allCheck: false,
			loading: false,
			searchParams: {},
			pageNum: 1,
			pageSize: 10,
			total: 0,
			searchData: [
				{
					title: '功能位置',
					key: 'installPosition',
					type: 'cascader',
					dicUrl: '/basic/organization/findListByToken?level=0',
					params: {
						label: 'name',
						value: 'code',
						children: 'children',
					},
				},
				{
					title: '设备编号',
					key: 'deviceNo',
				},
				// {
				// 	title: '工单号',
				// 	key: 'devicesNumber',
				// },
				{
					title: '日期',
					key: 'time',
					type: 'daterange',
				},
			],
			columns: [
				{
					key: 'selection',
					type: 'selection',
					width: 60,
					align: 'center',
				},
				{
					title: '日期',
					key: 'shutdownDate',
					width: 130,
					align: 'center',
					resizable: true,
				},
				{
					title: '班次',
					key: 'shift',
					width: 130,
					align: 'center',
					resizable: true,
				},
				{
					title: '位置',
					key: 'installPositionString',
					width: 130,
					align: 'center',
					resizable: true,
				},
				{
					title: '设备编号',
					key: 'deviceNo',
					width: 150,
					align: 'center',
					resizable: true,
				},
				{
					title: '模具编号',
					key: 'moldCodes',
					width: 150,
					align: 'center',
					resizable: true,
				},
				{
					title: '异常工时汇总（min）',
					key: 'totalShutdownDuration',
					width: 150,
					align: 'center',
					resizable: true,
				},
				{
					title: '停机工时（min）',
					align: 'center',
					children: [],
				},
			],
			myChart: null,
			dataArr: [],
			pageSizeOption: [10, 20, 30, 40],
			delIds: [],
			selection: [],
			checkBtnPermission: {},
			createByOptions: [],
		};
	},
	mounted() {
		// this.getTableColumnsWidth(this.columns);
		// this.getTableColumnsWidth(this.columns);
		this.searchList();
		this.getEchatData();
	},
	methods: {
		getEchatData() {
			this.axios({
				url: '/dms/oee-board/abnormalShutdownReport/top',
				method: 'post',
				data: {
					...this.searchParams
				},
			}).then((res) => {
				const data = res.data;
				const x = [];
				const y = [];
				for (let key in data) {
					x.push(key);
					y.push(data[key]);
				}

				this.initEchart(x, y);
			});
		},
		getSearch(arg) {
			this.searchParams = JSON.parse(JSON.stringify(arg[0]));
			const { time, installPosition } = this.searchParams;

			if (time && time.length > 0) {
				this.searchParams.shutdownStartDate = this.searchParams.time[0];
				this.searchParams.shutdownEndDate = this.searchParams.time[1];
				delete this.searchParams.time;
			}
			if (installPosition && installPosition.length > 0) {
				this.searchParams.installPosition = installPosition.at(-1);
			} else delete this.searchParams.installPosition;
			this.pageNum = 1;
			this.searchList();
			this.getEchatData();
		},
		reset() {
			this.searchParams = {};
			this.changeNum();
		},
		//分页
		changeNum() {
			this.pageNum = 1;
			this.searchList();
		},
		changePageSize(pageSize) {
			this.pageSize = pageSize;
			this.searchList();
		},

		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},
		//查询列表
		searchList() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.searchParams,
			};
			this.axios({
				method: 'post',
				url: '/dms/oee-board/abnormalShutdownReport',
				data: params,
			}).then((res) => {
				if (res.code === 200) {
					const data = res.data.list || [];
					this.total = res.data.total;
					if (data.length == 0) {
						this.dataArr = [];
						return;
					}
					const itemC = this.columns[this.columns.length - 1].children;
					itemC.splice(0, itemC.length);
					for (let key in data[0].shutdownReasonDetailsMaps) {
						itemC.push({
							title: key,
							key: key,
							width: 150,
							align: 'center',
							resizable: true,
						});
					}
					this.dataArr = res.data.list.map((item) => {
						return {
							...item.shutdownReasonDetailsMaps,
							shutdownDate: item.shutdownDate,
							shift: item.shift,
							moldCodes:item.moldCodes,
							installPositionString: item.installPositionString,
							deviceNo: item.deviceNo,
							totalShutdownDuration: item.totalShutdownDuration,
						};
					});
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		initEchart(x, y) {
			if (this.myChart != null && this.myChart != '' && this.myChart != undefined) {
				this.myChart.dispose(); //销毁
			}
			this.myChart = echarts.init(document.getElementById('topTen'));
			const option = {
				itemStyle: {
					borderRadius: [50, 50, 0, 0],
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				xAxis: {
					type: 'category',
					data: x,
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						data: y,
						type: 'bar',
						showBackground: true,
						color: '#5e85f0',
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)',
						},
					},
				],
			};
			this.myChart.setOption(option);
		},
		//勾选列表
		onSelectChange(selection) {
			let myArray = [];
			selection.map((item, index) => {
				myArray.push(item.id);
			});
			this.delIds = myArray;
			if (selection.length > 0) {
				this.allCheck = true;
			} else {
				this.allCheck = false;
			}
		},
		//导出
		exportTemplateClick() {
			let params = {
				delIds: this.delIds,
			};
			for (let key in this.searchParams) {
				if (this.searchParams[key]) {
					this.$set(params, key, this.searchParams[key]);
				}
			}
			const filName = '损失工时分析报表';
			this.axios({
				url: '/dms/oee-board/abnormalShutdownReport/export',
				method: 'post',
				responseType: 'blob',
				data: params,
			}).then((res) => {
				fileDownload(res, filName + '.xls');
			});
		},
	},
};
</script>

<style scoped lang="scss">
.ivu-input-number {
	width: -webkit-fill-available;
}

.row_click {
	cursor: pointer;
	color: rgb(50, 113, 240) !important;
}
</style>
